<template>
  <div :id="editorId" style="margin-top: 5px;">
    <textarea style="display: none" :id="editorId + 'Content'"></textarea>
  </div>
</template>

<script>
import { initPasteImg } from "@/api/editor-upload";

export default {
  name: "Editor",
  props: {
    editorId: 0, // 多编辑器共存时使用该Id用于区分,
    templateContent: "",
  },
  watch: {
    templateContent(val) {
      if (val) {
        this.temp = val;
        if (this.instance) {
          this.instance.clear();
          this.instance.insertValue(val);
        }
      }
    },
  },
  data() {
    return {
      instance: null,
      temp:
        "# <center>销售合同</center>\n" +
        "\n" +
        "\n" +
        "#### 甲方名称：\n" +
        "#### 乙方名称：<u>安徽烈阳光伏新能源有限公司</u>\n" +
        "\n" +
        "签订地点：<u>合肥</u>\n" +
        "\n" +
        "\n" +
        "依据《中华人民共和国民法典》及相关法律法规，经甲乙双方友好平等协商，就甲方向乙方购买设备的相关事宜达成以下条款，以供遵守。\n" +
        "\n" +
        "### 第一条：销售产品基础信息\n" +
        "\n" +
        "| 序号  | 产品名称  | 规格  | 数量  |  单价（元） | 单位  | 小计（元）  | 备注  |\n" +
        "| :------------ | :------------ | :------------ | :------------ | :------------ | :------------ | :------------ | :------------ |\n" +
        "|  合计： | ¥ （含税）  |  大写： |   |  元整 |   |   |   |\n" +
        "|  票据类型 | 专票  |  普票 |   |   |   |   |   |\n" +
        "|  税率 | 13%  |   |   |   |   |   |   ||\n" +
        "\n" +
        "\n" +
        "### 第二条：结算方式及期限\n" +
        "\n" +
        "1. 结算方式：款到发货；选择第 ② 种结算方式。  ①现金；②电汇转账；\n" +
        "2. 期限：参考合同第十条相关规定。\n" +
        "\n" +
        "\n" +
        "### 第三条：收款账户信息\n" +
        "\n" +
        "|  公司名称： | 安徽烈阳光伏新能源有限公司  |\n" +
        "| :------------ | :------------ |\n" +
        "|  账    号： |  3610000010120100441390 |\n" +
        "| 开 户 行：  | 浙商银行合肥分行营业部  |\n" +
        "\n" +
        "\n" +
        "### 第四条：交（提）货地点、方式\n" +
        "\n" +
        "1. 发(提)货时间：合同生效且收到全款后<u> 5 </u>个工作日内；\n" +
        "2. 交货地点：客户指定地点；\n" +
        "3. 运输方式：限中国大陆境内（不含港、澳、台）能通物流地点，仅限一次运输，不含倒运或二次输；\n" +
        "4. 交货方式：选择第<u>     </u>种交货方式\n" +
        "①由乙方包运，运费由乙方承担；②甲方自提货物，交货地点为乙方合肥仓库；③乙方代为联系物流，运费由甲方承担；\n" +
        "针对货物运输过程中可能出现的风险损失，如为乙方包运的则由乙方承担，甲方自提以及委托乙方代为联系物流的，甲方自行承担；\n" +
        "5. 产品运至甲方指定收货地点后，甲方负责卸货。\n" +
        "\n" +
        "\n" +
        "### 第五条：品质保证及服务\n" +
        "1. 产品技术标准：参照产品生产企业相关技术标准\n" +
        "\n" +
        "\n" +
        "### 第六条：产品的验收\n" +
        "1. 验收标准：甲方收货时在完成货品包装、数量、型号核验后方可验收。\n" +
        "2. 验收期限：货到甲方指定收货地点后5日内验收，并在验收期限内对存在问题以书面形式进行反馈，逾期不验收视为甲方对货物数量及质量均无异议；\n" +
        "3. 因甲方使用、保养、保管不当等造成产品质量问题的，不得追究乙方的质量责任；\n" +
        "\n" +
        "\n" +
        "### 第七条：违约责任\n" +
        "1. 甲方的违约责任：\n" +
        "甲方确保购买产品使用及分销区域为中国大陆地区，违反乙方销售区域限制导致的一切损失由甲方承担(包含但不限于由于跨区销售导致原设备生产厂家对乙方的追责损失)。\n" +
        "2. 乙方的违约责任：\n" +
        "如因电信、移动等通信运营商网络升级改造、通讯故障、服务终止等原因造成的设备通信传递异常，甲方同意免除乙方责任。\n" +
        "\n" +
        "\n" +
        "### 第八条：合同解除条件\n" +
        "合同当事人一方违约，在合同另一方当事人发出继续履行合同通知书之日起满15天的，违约方仍不按照合同约定履行义务的，合同另一方当事人有权无条件提前解除本合同。\n" +
        "\n" +
        "\n" +
        "### 第九条：合同争议的解决方式\n" +
        "本合同在履行过程中发生的争议，由双方协商解决，协商不成的，合同的任何一方可向乙方所在地人民法院起诉。\n" +
        "\n" +
        "\n" +
        "### 第十条：合同的生效及确认\n" +
        "本合同一式贰份，甲乙双方各执壹份，经双方法定代表人或授权代表人签字、盖章生效，若双方签字日期不一致时，以最后签字方的签字日期为合同的生效日期，传真/扫描件有效。\n" +
        "甲方应于乙方盖章之日起两日内盖章/签字并回传合同，超过期限未回传的，视为合同不生效，自动作废。后续要求继续合作的，需重新签订合同。\n" +
        "\n" +
        "\n" +
        "### 第十一条：补充条款（如无统一填写：无补充条款。补充条款区域不可留白）\n" +
        "<u>            无补充条款                  </u>\n" +
        "\n" +
        "\n" +
        "\n" +
        "\n" +
        "\n" +
        "\n" +
        "| 甲方（盖章）：   | 乙方（盖章）：安徽烈阳光伏新能源有限公司  |\n" +
        "| :------------ | :------------ |\n" +
        "| 法定或授权代表人：  |  法定或授权代表人： |\n" +
        "| 签订日期： 2023年  月  日  |  签订日期：2023年  月  日 |\n" +
        "\n",
    };
  },
  mounted() {
    let _this = this;
    _this.$nextTick(() => {
      this.instance = editormd(this.editorId, {
        placeholder: "请输入内容...",
        width: "100%",
        height: 1000,
        syncScrolling: "single",
        saveHTMLToTextarea: true, // 开启获取 html 源码
        flowChart: true, //控制流程图编辑
        sequenceDiagram: true, //控制时序图编辑
        taskList: true, //任务列表
        tex: true, //科学公式
        emoji: true,
        path: "/editor.md-master/lib/",
        saveHTMLToTextarea: true,
        tocm: true,
        tex: true,
        flowChart: true,
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: process.env.VUE_APP_BASE_API + "/subject/uploadImg", // 这是文件上传基路径，修改路径即可，作为附件上传至服务器，然后返回绝对URL
        toolbarIcons: function () {
          return [
            "undo",
            "redo",
            "|",
            "bold",
            "hr",
            "|",
            "preview",
            "watch",
            "|",
            "fullscreen",
            "h1",
            "h2",
            "h3",
            "h4",
            "h5",
            "h6",
            "|",
            "list-ul",
            "list-ol",
            "|",
            "image",
            "table",
            "|",
            "center",
            "underline",
            "temp",
            "study",
          ];
        },
        toolbarIconTexts: {
          center: "居中",
          underline: "下划线",
          temp: "模板", // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
          study: "教程", // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
        },
        // 自定义工具栏按钮的事件处理
        toolbarHandlers: {
          center: function (cm, icon, cursor, selection) {
            cm.replaceSelection("<center>" + selection + "</center>");
            // 如果当前没有选中的文本，将光标移到要输入的位置
            if (selection === "") {
              cm.setCursor(cursor.line, cursor.ch + 1);
            }
          },
          underline: function (cm, icon, cursor, selection) {
            cm.replaceSelection("<u>" + selection + "</u>");
            // 如果当前没有选中的文本，将光标移到要输入的位置
            if (selection === "") {
              cm.setCursor(cursor.line, cursor.ch + 1);
            }
          },
          temp: function () {
            _this.instance.insertValue(_this.temp);
          },
          study: function () {},
        },
        onload() {
          _this.instance.insertValue(_this.temp);
        },
      });
      initPasteImg(_this.instance);
    });
  },
  methods: {
    getValue() {
      return $.trim($("#" + this.editorId + "Content").text());
    },
  },
};
</script>

<style></style>
